<template>
	<view class="content">
		<view class="panel-header">
			<text class="panel-title text-xl text-bold">基本信息</text>
		</view>
		<view class="panel-content margin-left border-left">
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">姓名:</view>
				<view class="basis-70">
					<view>{{student.name}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">年龄:</view>
				<view class="basis-70">
					<view>{{student.age}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">民族:</view>
				<view class="basis-70">
					<view>{{student.nation}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">性别:</view>
				<view class="basis-70">
					<view>{{student.gender}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">政治面貌:</view>
				<view class="basis-70">
					<view>{{student.politics}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">电话:</view>
				<view class="basis-70">
					<view>{{student.tel}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left">
				<view class="basis-30">邮箱:</view>
				<view class="basis-70">
					<view>{{student.mail}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left" v-if="false">
				<view class="basis-30">学位:</view>
				<view class="basis-70">
					<view>{{student.degree}}</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left" v-if="false">
				<view class="basis-30">学历:</view>
				<view class="basis-70">
					<view>{{student.record}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				student: {
					name: '',
					age: 0,
					nation: '',
					gender: '',
					politics: '',
					tel: '',
					mail: '',
					degree: '',
					record: ''
				},
				profileEdit: false,
				pickData: ['男', '女']
			}
		},
		created() {},
		methods: {},
		props: ['external_data'],
		watch: {
			external_data: {
				handler(val, oldVal){
					this.student = val;
				},
				deep:true
			}
		}
	}
</script>

<style>
	.panel {
		/* width: 100%; */
		margin: 10px;
		padding: 10px;
		height: auto;
	}
	
	.panel-header {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
	
	.panel-title {
		padding: 0 20px;
		background-color: #6d3b5e;
		color: white;
		border-radius: 20px;
	}
	
	.panel-content {
		/* border-bottom: #006FFF 2px solid; */
	}
	
	.word-warp {
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}
	
	.border-bottom {
		border-bottom: #6d3b5e solid 1px;
	}
	
	.border-left {
		border-left: #6d3b5e solid 2px;
	}
	
	.basis-30 {
		flex-basis: 30%;
	}
	
	.basis-70 {
		flex-basis: 70%;
	}
</style>
